<template>
  <div class="person">
    <div class="person-info">
      <img src="./images/user-logo.png" class="person-img">
      <div class="person-name">{{storeData.storeName}}</div>
      <div class="person-phone">{{storeData.storePhone}}</div>
    </div>
    <div class="person-pwd">
      <div class="password-deta">
        <div class="fw700 pb">账户密码</div>
        <div class="c8D">当前密码强度：<span class="c52C41A">强</span></div>         
      </div>
      <div class="password-res" @click="showMask">修改</div>
    </div>

    <!-- 弹窗 -->
    <div class="mask">
      <div class="pwd-rev">
        <div class="pwd-rev-tt">
          <div>修改密码</div>
          <span class="iconfont icon-shanchu" @click="noShowMask"></span>
        </div>
        <form>
          <div class="input-row mt4">
            <div class="input-label pl">&nbsp;&nbsp;&nbsp;原密码</div>
            <div class="input" id="oldPwdInput">
              <input type="password" placeholder="请输入原密码" id="oldPwd" v-model="oldPassword">
            </div>
          </div>

          <div class="input-row">
            <div class="input-label pl">&nbsp;&nbsp;&nbsp;新密码</div>
            <div class="input" id="newPwdInput">
              <input type="password" placeholder="请输入新密码" id="newPwd" v-model="newPassword">
            </div>
          </div>

          <div class="input-row mb4">
            <div class="input-label">确认密码</div>
            <div class="input" id="conPwdInput">
              <input type="password" placeholder="请确认密码" id="conPwd" v-model="newPasswordagain">
            </div>
          </div>
        </form>
        <div class="pwd-btn">
          <button class="btn" id="remBtn" @click="noShowMask">取消</button>
          <button class="btn" id="defBtn" @click="setUserPwd">确定</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name:'Person',
  data(){
    return {
      oldPassword: '',
      newPassword: '',
      newPasswordagain: '',
      userPhone: JSON.parse(sessionStorage.getItem("USERPHONE")),
    }
  },
  methods: {
    showMask() {
      var oMask = document.querySelector('.mask'); 
      oMask.style.display="block";
    },
    noShowMask() {
      var oMask = document.querySelector('.mask'); 
      oMask.style.display="none";
    },
    //登录业务：派发active
    async setUserPwd(){
      try{
        let res = '';
        const {oldPassword,newPassword,newPasswordagain} = this;
        if(oldPassword && newPassword && newPasswordagain) {
          res = await this.$store.dispatch('setUserPwd',{oldPassword,newPassword,newPasswordagain});
        }
        if(res) {
          alert('修改成功！');
          this.noShowMask(); 
        }else {
          alert('请输入账号或密码！');
        }
      }catch(error){
        alert(error.message);
      }
    }
  },
  computed: {
    ...mapState({
      storeData: (state) => state.login.storeData || {},
    }),
  }
}
</script>

<style scoped>
  .fw700 {
    font-weight: 700;
  }

  .c52C41A {
    color: #52C41A;
  }

  .c8D {
    color: #8D8D8D;
  }

  .pb {
    padding-bottom: .2vh;
  }

  .mt4 {
    margin-top: 4vw;
  }

  .mb4 {
    margin-bottom: 4vw;
  }

  .person {
    box-sizing: border-box;
    width: 100%;
    height: 99%;
    padding-top: 1.6vh;
    background-color: #fff;
    border-radius: 4vw;
  }

  .person .person-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 9vh;
    padding-bottom: 4vh;
    border-bottom: .2vh solid #ccc;
  }

  .person .person-img {
    width: 18vw;
    height: 10vh;
    border: .5vw solid #ccc;
    border-radius: 2vw;
    overflow: hidden;
    margin-bottom: 1.8vh;
  }

  .person .person-phone {
    padding-top: 1.8vh;
    color: #999;
  }
  .person .person-pwd {
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 8.8vh;
    padding-left: 4vw;
    padding-right: 2vw;
    border-bottom: .2vh solid #ccc;
  }  
  .person .password-deta {
    font-size: 4vw;
  }
  .person .password-res {
    font-size: 4vw;
    color: #1890FF;
  }
  .mask {
    display: none;
    position: absolute;
    width: 100%;
    height: 83.2vh;
    top: 11.8vw;
    background-color: rgba(0, 0, 0, .4);
    z-index: 999;
  }
  .mask .pwd-rev {
    box-sizing: border-box;
    position: relative;
    width: 80vw;
    height: 36.8vh;
    top: 50%;
    left: 50%;
    margin-top: -18.4vh;
    margin-left: -40vw;
    border-radius: 2vw;
    background-color: #fff;
  }
  .mask .pwd-rev-tt {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4vw;
    border-bottom: .5vw solid #EBEBEB;
    font-size: 3.6vw;
  }

  .mask .input-row {
    box-sizing: border-box;
    display: flex;
    align-items:center;
    width: 70vw;
    height: 5vh;
    padding-top: 1.2vw;
    margin-left: 4.8vw;
    border: .4vw solid #E4E4E4;
  }

  .mask .input-label {
    width: 18vw;
    height: 4vh;
    font-size: 4vw;
    padding-left: 4vw;
  }

  .mask .input {
    height: 4vh;
    font-size: 4vw;
    color: #BCBCBC;
  }

  .mask .pwd-btn {
    border-top: .5vw solid #EBEBEB;
    text-align: right;
    padding: 4vw;
  }

  .mask .btn {
    width: 16vw;
    height: 4vh;
    margin-left: 2vw;
    font-size: 3vw;
  }

  .mask #remBtn {
    color: #000;
    background-color: #fff;
    border: 0.4vw solid #ccc;
    border-radius: 0.8vh;
  }

  .mask #defBtn {
    color: #fff;
    background-color: #118EE9;
    border: 0.4vw solid #118EE9;
    border-radius: 0.8vh;
  }
</style>